@model Mod.DisplayTypes.Settings.DisplayTypePartTypePartSettings
@using Orchard.ContentManagement;

@{
    Script.Require("jQuery").AtHead();
}

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>

<fieldset>
    <br />
    <p id="aliasgenerates" style="display:none">
        @Html.TextBoxFor(e => e.AliasesGenerates, new { data_bind="value: yay", @class="tokenized" })
    </p>

    

    <table>
        <tbody data-bind="template: { name: 'routeRowTemplate', foreach: routes }"></tbody>
    </table>
    <button data-bind="click: addRoute">Add Route</button>
    <br />
    <input style="margin-top: 20px" class="tokenized" type="text" />
</fieldset>

@using(Script.Foot()) {
    <script type="text/javascript">
        $(function() {
            var initialData = @Html.Raw(Json.Encode(Model.RouteList));
            var viewModel = {
                routes : ko.observableArray(initialData),
                yay: ko.observable(""),
                addRoute: function() {
                    this.routes.push({ DisplayType: "", Slugs: "" })
                },
                removeRoute: function(route) {
                    this.routes.remove(route);
                },
                buildString: function() {
                    var json = ko.toJSON(this.routes);
                    this.yay(json);
                }
            };
 
            ko.applyBindings(viewModel, document.body);

            $("form").submit(function(e) {
                viewModel.buildString();
            });
        });
    </script>
    
    <script type="text/html" id="routeRowTemplate">
        <tr>
            <td>Display Type: <input type="text" data-bind="value: DisplayType"/></td>
            <td>Route: <input class="tokenized" type="text" data-bind="value: Slugs"/></td>
            <td><a href="#" data-bind="click: function() { $root.removeRoute($data) }">Delete</a></td>
        </tr>
    </script>
}

@Display.TokenHint()